<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作
		 append()               功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend()              功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after()                功能：在匹配元素集合中所有元素的后面插入内容
		 before()               功能：在匹配元素集合中所有元素的后面插入内容
		 
		 remove()               功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		 empty()                功能：清空匹配元素集合中所有的元素和内容【盒子模型不删掉】
		 
		 repalceWith()
		 
		 -->
	</head>
	<style>
		button{
			margin: 10px;
			padding: 10px 15px;
			cursor: pointer;
		}
		body{
			margin: 20px;
		}
		#target{
			border: 1px solid #1e1e2e;
			margin-left: 5px;
			padding: 10px;
			margin-top: 10px;
			border-radius: 5px;
		}
		.both{
			width:300px;
			         height:300px;
					   background-color:#ff0;
					   border-radius:50%;
					   background-image:"url(../img/nailong.gif)";
					   background-size:100% 100%;
					   color:transparent;
					   display:block;
		}
	</style>
	<script src="../js/jquery-1.11.1.js"></script>
	<body>
		<!-- html:7个按钮  div包含p包含：目标元素的初始段落  id="target"
		                   div包含p包含:插入元素的初始段落  id="newElement" 隐藏
				css: 按钮：外边距5px，内边距：10px 15px 鼠标移动上：手动显示
						   body:外边距20px
						   #target:1像素边框，内边距：10px，上外边距：10px
				引入JQ		   
						   -->
		   <button id="appendBtn">内部末尾插入元素</button>
		   <button id="prependBtn">内部开头插入元素</button>
		   <button id="afterBtn">外部后面插入元素</button>
		   <button id="beforeBtn">外部前面插入元素</button>
		   <button id="removeBtn">删除元素</button>
		   <button id="emptyBtn">清空元素</button>
		   <button id="replaceBtn">替换元素</button>
		   <!-- 目标显示区域 -->
	<div id="target">
		<p>目标元素的初始段落</p>
	</div>
	<!-- 用于插入跟替换的区域 -->
	<div id="newElement">
		<p>插入新元素的初始段落</p>
	</div>
	<script>
		/* 1.点击 内容末尾插入元素 按钮 p文本后面追加新元素中包含内容操作 */ 
		$("#appendBtn").click(function(){
			//效果：点击按钮  追加“新元素--自带内容”
			//1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
			var cpe=$("#newElement").clone();
			//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
			//1.2 自带属性和属性值：隐藏--改成显示
			cpe.css("display","block");
			//1.3 将复制出来的新元素，追加给当前元素上
			$("#target").append(cpe);
		});
		/* 2. 点击 内部末尾插入元素 按钮 p文本后面追加新元素中包含内容操作 */ 
		$("#prependBtn").click(function(){
			var cpe=$("#newElement").clone();
			cpe.css("display","block");
			$("#target").prepend(cpe);
			});
		/* 3. 点击 外部后面插入元素 按钮 p文本后面追加新元素中包含内容操作 */ 
		$("#afterBtn").click(function(){
			//var cpe=$("#newElement").clone();
			// cpe.css("display","block");
			cpe.addClass("both");
			$("#target").after("both");
			});
		/* 4. 点击 外部前面插入元素 按钮 生成 圆形， 保留背景色，文本不需要
		                                           背景图300*300 */ 	
		$("#beforeBtn").click(function(){
			var cpe=$("#newElement").clone();
			cpe.css({"width":"300px",
			         "height":"300px",
					   "background-color":"#ff0",
					   "border-radius":"50%",
					   "background-image":"url(../img/nailong.gif)",
					   "background-size":"100% 100%",
					   "color":"transparent",
					   "display":"block"
			})
			$("#target").before(cpe);
			});
			/* 5.点击 删除元素 按钮 页面上所有元素包括子元素全部删除【盒子模型删】 */
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			/* 6. 点击  清空元素 按钮 页面上所有元素中内容全部删除【盒子模型不删】 */
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			/* 7.点击 替换元素 按钮 页面上目标元素替换为新元素 */
			$("#replaceBtn").click(function(){
				//克隆  新元素  #newElement【父子级】
				var c=$("#newElement").clone().css("display","block");
				//替换  找到  目标元素  替换  新元素
				$("#target").replaceWith(c);
			});
	</script>
	</body>
	
</html>